<template>
  <view class="container">


    <!-- 搜索框 -->
    <view class="search-box">
      <icon class="search-icon"type="search" size="14" color="#999999"/>
      <input 
        class="search-input" 
        placeholder="请输入电柜编号或名称"
        placeholder-style="color: #cccccc;"
		v-model="keyword" 
		@confirm="loadDoorList"
      />
      <view class="qr-scan-icon">
        <text>⧉</text>
      </view>
    </view>
    <!-- 筛选选项 -->
    <view class="filter-options">
      <view class="filter-item" :class="{active:currentFilter=='所有'}" @click="setFilter('所有')">所有</view>
      <view class="filter-item" :class="{active:currentFilter=='仓门禁用'}" @click="setFilter('仓门禁用')">仓门禁用</view>
      <view class="filter-item" :class="{active:currentFilter=='仓门未关'}" @click="setFilter('仓门未关')">仓门未关</view>
    </view>
    <!-- 数据统计 -->
    <view class="data-count">
      <text class="line"></text>
      <text class="count-text">共{{filteredData.length}}条数据</text>
      <text class="line"></text>
    </view>
    <!-- 仓库列表 -->
    <view class="warehouse-list">
      <!-- 第一个仓库 -->
      <view class="warehouse-card" v-for="(item,index) in filteredData">
        <view :class="[item.boxEnable?'status-enabled' : 'status-disabled']">
          <text>{{item.boxEnable ? '已启用' : '已禁用'}}</text>
        </view>
        <view class="warehouse-header">
          <view class="warehouse-title">{{item.cabinetSn}}-{{item.doorSn}}号仓</view>
          <view :class="[item.doorStatus?'status-closed' : 'status-open']">{{item.doorStatus ? '已关闭' : '已开启'}}</view>
        </view>
        <view class="info-row">
          <text class="label">换电柜编号：</text>
          <text class="value">{{item.cabinetSn || '未知'}}</text>
        </view>
        <view class="info-row">
          <text class="label">仓门编号：</text>
          <text class="value">{{item.doorSn || '未知'}}</text>
        </view>
        <view class="info-row">
          <text class="label">状态：</text>
          <text class="value">{{statusMap[item.boxStatus]  || '未知'}}</text>
        </view>
        <view class="info-row">
          <text class="label">电池编号：</text>
          <text class="value">{{item.batterySn || '未知'}}</text>
        </view>
        <view class="info-row">
          <text class="label">电池型号：</text>
          <text class="value">{{item.batteryTypeName || '未知'}}</text>
        </view>
        <view class="info-row">
          <text class="label">温度：</text>
          <text class="value">{{item.boxTemperature || '未知'}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import api from '@/config/api.js'
export default {
  data() {
    return {
      keyword:'',
      warehouses: [],
      // 当前筛选条件
      currentFilter: '所有',
      statusMap:{
		0:'无电池',
		1:'电池正在充电',
		2:'电池充满',
		5:'异常'
	  },
      filteredData: []
    }
  },
  onLoad(option) {
    // 初始化数据
    this.loadDoorList(option.cabinetSn)
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
	async loadDoorList(cabinetSn='') {
		try {
			let params={
				pageNo: 1,
				pageSize: 15,
				cabinetSn,
			}
			this.keyword && (params.cabinetSn=this.keyword)
		  const result = await api.door.getDoors({
			...params
		  })
		  console.log('getCabinetList',result)
		  this.warehouses = result
		  this.filteredData = [...this.warehouses];
		} catch (error) {
		  console.error('获取列表失败:', error)
		}
	},  
    // 设置筛选条件
    setFilter(filter) {
      this.currentFilter = filter;
      
      switch(filter) {
        case '所有':
          this.filteredData = [...this.warehouses];
          break;
        case '仓门禁用':
          this.filteredData = this.warehouses.filter(item => item.boxEnable == 0);
          break;
        case '仓门未关':
          this.filteredData = this.warehouses.filter(item => item.doorStatus === 0);
          break;
      }
    },
    // 扫描二维码
    scanQRCode() {
      uni.scanCode({
        onlyFromCamera: true,
        success: (res) => {
          console.log('扫描结果:', res.result);
         const snMatch = res.result.match(/sn=([^&]+)/) || res.result.match(/cabinetSn=([^&]+)/);
         const cabinetSn = snMatch ? snMatch[1] : null;
         this.keyword = cabinetSn
        },
        fail: () => {
          uni.showToast({
            title: '扫描失败',
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 0;
  width: 100%;
  background-color: #f8f8f8;
  min-height: 100vh;
}

/* 导航栏样式 */
.nav-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 15px;
  background-color: #ffffff;
  
  .back-icon {
    font-size: 20px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .title {
    font-size: 17px;
    font-weight: 500;
    color: #000000;
  }
  
  .menu-buttons {
    display: flex;
    align-items: center;
    
    .dots {
      font-size: 20px;
      margin-right: 15px;
    }
    
    .circle-icon {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 2px solid #000;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

/* 搜索框样式 */
.search-box {
  margin: 10px 15px;
  background-color: #f2f2f2;
  border-radius: 8px;
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  
  .search-icon {
    margin-right: 5px;
  }
  
  .search-input {
    flex: 1;
    height: 36px;
    font-size: 14px;
  }
  
  .cancel-text {
    color: #ff0000;
    font-size: 14px;
    padding-right: 5px;
  }
  
  .qr-scan-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999999;
  }
}

/* 筛选选项样式 */
.filter-options {
  display: flex;
  padding: 10px 0;
  background-color: #ffffff;
  border-bottom: 1px solid #eeeeee;
  position: relative;
  .filter-item {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #333333;
  }
  
  .filter-item.active {
    color: #4caf50;
  }
  
  .filter-item.highlight {
    color: #ffffff;
    background-color: #ff0000;
    border-radius: 4px;
    padding: 2px 8px;
  }
  
  .filter-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #999999;
    font-size: 16px;
  }
}

/* 数据统计 */
.data-count {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  
  .line {
    width: 60px;
    height: 1px;
    background-color: #dddddd;
  }
  
  .count-text {
    margin: 0 10px;
    font-size: 14px;
    color: #999999;
  }
}

/* 仓库列表 */
.warehouse-list {
  padding: 0 15px;
}

.warehouse-card {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
}

.status-enabled {
  display: inline-block;
  background-color: #4caf50;
  color: #ffffff;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.status-disabled {
  display: inline-block;
  background-color: #9c9e92;
  color: #ffffff;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.warehouse-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.warehouse-title {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
}

.status-closed {
  font-size: 14px;
  color: #ffffff;
  background-color: #4a90e2;
  padding: 2px 10px;
  border-radius: 4px;
}
.status-open {
  font-size: 14px;
  color: #ffffff;
  background-color: #ff4a4a;
  padding: 2px 10px;
  border-radius: 4px;
}
.info-row {
  display: flex;
  padding: 10px 0;
  border-bottom: 1px solid #f2f2f2;
  
  .label {
    width: 90px;
    color: #999999;
    font-size: 14px;
  }
  
  .value {
    flex: 1;
    color: #333333;
    font-size: 14px;
	text-align: right;
  }
}
</style>